In [1]:
from bokeh import __version__
__version__


Out[1]:
'0.12.0dev10'

In [2]:
from bokeh.io import output_notebook, show
output_notebook()


Loading BokehJS ...

When using the new layout Row & Column it's important that all responsive modes in a given layout are the same.

First we set-up a simple function to make a plot that we can re-use.


In [6]:
from bokeh.plotting import figure
def make_plot(responsive=False):
    p = figure(responsive=responsive, width=400, height=100)
    p.scatter(x=[1, 2], y=[3, 4], size=20)
    return p

Let's set-up a Column with two plots in it, all with responsive=True


In [4]:
from bokeh.models import Column
RESPONSIVE = True
show(
    Column(
        make_plot(RESPONSIVE), 
        make_plot(RESPONSIVE), 
        responsive=RESPONSIVE
    )
)


Out[4]:

<Bokeh Notebook handle for In[4]>

If you resize the notebook window, you'll see the plots resizing - but maintaining their aspect ratio.

Let's see what happens if we forget to set the responsive mode of the Column


In [5]:
RESPONSIVE = True
show(
    Column(
        make_plot(RESPONSIVE), 
        make_plot(RESPONSIVE), 
    )
)


Out[5]:

<Bokeh Notebook handle for In[5]>

In this case we see nothing! The Column is there but because of a strange interaction with the notebook output cell we can't actually see it.

Hopefully this highlights the importance of using the same mode.

Using layout function to save us some typing

The layout function automatically goes through and makes sure that everything has the same mode, saving us a bunch of time.

The layout column accepts a list of lists. We will also be adding row and column functions before 0.12 is released.


In [8]:
from bokeh.layouts import layout

show(layout([[make_plot()], [make_plot()]], responsive='width_ar'))


Out[8]:

<Bokeh Notebook handle for In[8]>

I had to use responsive='width_ar' because responsive=True isn't currently a valid value for the layout function - I've opened an issue for this (https://github.com/bokeh/bokeh/issues/4469). (Note that's we're also in the process of renaming the responsive modes - I'll update this post, when that's ready).


In [ ]: